<!--
 * @Author: Lin Hongwei
 * @Date: 2021-12-12 20:21:29
 * @LastEditTime: 2021-12-14 20:20:07
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: epub阅读页面
-->
<template>
  <div class="epub">
    <div class="read-wrapper">
      <div ref="epubTarget" id="epub_target"></div>
      <div class="mask">
        <div
          class="mask-side"
          @mouseenter="onMouseOverSide(0)"
          @mouseleave="showLeftSide = false"
        >
          <transition name="side">
            <span
              class="iconfont icon-shangyiye"
              @click="prev()"
              v-show="showLeftSide"
            />
          </transition>
        </div>
        <div class="mask-center" @click="showMenu = !showMenu"></div>
        <div
          class="mask-side"
          @mouseenter="onMouseOverSide(1)"
          @mouseleave="showRightSide = false"
        >
          <transition name="side">
            <span
              class="iconfont icon-xiayiye"
              @click="next()"
              v-show="showRightSide"
            />
          </transition>
        </div>
      </div>
      <title-bar :title="title" :showMenu="showMenu" />
      <menu-bar
        ref="menubar"
        :showMenu="showMenu"
        :fontSizeList="fontSizeList"
        :defaultFontSize="defaultFontSize"
        :bookAvailable="bookAvailable"
        :themeList="themeList"
        :defaultThemeIndex="defaultThemeIndex"
        @handleShowSetting="handleShowSetting"
        @onPregressChange="onPregressChange"
        @setFontSize="setFontSize"
        @handleSetTheme="setThemes"
      />
    </div>
    <transition name="nav">
      <div class="navigation" v-show="showToc">
        <div class="nav-item" v-for="(item, index) in tocList" :key="index" @click="handleNav(item)">
          {{ item.label }}
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import EPUB_URL from "@static/fm.epub";
import Epub from "epubjs";
const EPUB_URL = "/static/fm.epub";
import MenuBar from "@/components/MenuBar.vue";
import TitleBar from "@/components/TitleBar.vue";
export default {
  name: "epub",
  components: { MenuBar, TitleBar },
  data() {
    TitleBar;
    return {
      title: "XXX",
      showLeftSide: false,
      showRightSide: false,
      showMenu: false,
      fontSizeList: [
        { fontSize: 12 },
        { fontSize: 14 },
        { fontSize: 16 },
        { fontSize: 18 },
        { fontSize: 20 },
        { fontSize: 22 },
        { fontSize: 24 },
      ],
      defaultFontSize: 16, //默认字体
      bookAvailable: false, //是否可以选择进度
      themeList: [
        {
          name: "default",
          label: "默认",
          style: {
            body: {
              color: "#000",
              background: "#fff",
            },
          },
        },
        {
          name: "eyehelp",
          label: "护眼",
          style: {
            body: {
              color: "#000",
              background: "#C7EDCC",
            },
          },
        },
        {
          name: "night",
          label: "夜间",
          style: {
            body: {
              color: "#fff",
              background: "#000",
            },
          },
        },
        {
          name: "sky",
          label: "天蓝",
          style: {
            body: {
              color: "#fff",
              background: "#87CEEB",
            },
          },
        },
      ], //主题列表
      defaultThemeIndex: 0,
      tocList: [], //菜单列表
      showToc: false, //显示菜单
    };
  },
  mounted() {
    this.initEpub();
  },
  methods: {
    /**
     * @description: 初始化电子书
     * @param {*}
     * @return {*}
     */
    initEpub() {
      this.book = new Epub(EPUB_URL);
      //获取书名
      this.book.loaded.metadata.then((res) => {
        this.title = res.title;
      });
      //通过renderTo生成一个Rendition对象
      this.rendition = this.book.renderTo("epub_target", {
        width: this.$refs.epubTarget.width,
        height: this.$refs.epubTarget.height,
      });
      //通过Rendition对象的display进行渲染
      this.rendition.display();
      //获取Theme对象
      this.themes = this.rendition.themes;
      this.setFontSize(this.defaultFontSize);
      //注册主题
      this.registerThemes();
      //设置默认的主题
      this.setThemes(this.defaultThemeIndex);

      //监听加载
      this.book.ready
        .then(() => {
          this.navigation = this.book.navigation; //获取对应的菜单信息
          this.tocList = this.navigation.toc;
          return this.book.locations.generate();
        })
        .then((result) => {
          this.locations = this.book.locations;
          console.log(this.navigation);
          this.bookAvailable = true;
        });
    },
    /**
     * @description: 下一页
     * @param {*}
     * @return {*}
     */
    next() {
      if (this.rendition) {
        this.rendition.next().then((res) => {
          this.getCurrentLocation();
        });
      }
    },
    /**
     * @description: 上一页
     * @param {*}
     * @return {*}
     */
    prev() {
      if (this.rendition) {
        this.rendition.prev().then((res) => {
          this.getCurrentLocation();
        });
      }
    },
    /**
     * @description: 鼠标移动到按钮
     * @param {*} type - 类型
     * @return {*}
     */
    onMouseOverSide(type) {
      this.showLeftSide = !type;
      this.showRightSide = !!type;
    },
    /**
     * @description: 显示设置菜单的时候
     * @param {*} type
     * @return {*}
     */
    handleShowSetting(type) {
      this.showToc = (typeof(type) == 'number')&&type == 0;
    },
    /**
     * @description: 设置文字大小
     * @param {*} fontSize
     * @return {*}
     */
    setFontSize(fontSize) {
      if (this.themes) {
        this.defaultFontSize = fontSize;
        this.themes.fontSize(fontSize + "px");
      }
    },
    /**
     * @description: 设置进度
     * @param {*} pregress
     * @return {*}
     */
    onPregressChange(pregress) {
      const percentege = pregress / 100;
      const location = this.locations.cfiFromPercentage(percentege);
      this.rendition.display(location);
    },
    /**
     * @description: 获取当前进度
     * @param {*}
     * @return {*}
     */
    getCurrentLocation() {
      //查询当前进度
      const res = this.rendition.currentLocation();
      //设置对应的进度
      this.$refs.menubar.onProgressInput(Math.floor(res.end.percentage * 100));
    },
    /**
     * @description: 注册主题
     * @param {*}
     * @return {*}
     */
    registerThemes() {
      this.themeList.forEach((item) => {
        this.themes.register(item.name, item.style);
      });
    },
    /**
     * @description: 设置对应的主题
     * @param {*} index - 所选主题索引
     * @return {*}
     */
    setThemes(index) {
      this.themes.select(this.themeList[index].name);
      this.defaultThemeIndex = index;
    },
    handleNav(item){
      this.rendition.display(item.href);
    }
  },
};
</script>

<style lang="scss" scoped>
.epub {
  // @include layout-full;
  // overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  .read-wrapper {
    @include layout-full;
    overflow: hidden;
    #epub_target {
      // @include layout-full;
    }
  }
  .mask {
    @include layout-full;
    display: flex;

    &-side {
      flex: 0 0 px2rem(150);
      @include center;
      .iconfont {
        color: rgb(197, 197, 197);
        font-size: px2rem(100);
        cursor: pointer;
      }
    }
    &-center {
      flex: 1;
    }
  }
  .navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: px2rem(400);
    height: 100%;
    background: #000;
    z-index: 102;
    .nav-item {
      color: #fff;
      margin: px2rem(20);
      font-size: px2rem(30);
    }
    .nav-item:hover {
      text-decoration: underline;
      color: #87ceeb;
      cursor: pointer;
    }
  }
}
</style>
